<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>搜索页面</title>
    <!-- 重置样式文件 -->
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <!-- 变量文件 -->
    <link rel="stylesheet" href="./css/variable.css" />
    <link rel="stylesheet" href="./css/search.css" />
    <!-- main style -->
    <script src="./js/vue.global.js"></script>
  </head>
  <body>
    <div id="app-search">
      <header-com></header-com>
      <main class="search-container">
        <card-com style="margin-top: 20px">
          <template #left>
            <div class="card-left">
              <card-head src="./assets/list.png">搜索结果</card-head>
              <h3 style="margin-top: 20px" v-if="!searchData.length">
                暂无数据......
              </h3>
              <div class="search-view">
                <div
                  class="search-item"
                  v-for="item in showSearchDATA"
                  :key="item.id"
                >
                  <a class="cover-box" :href="item.href">
                    <img :src="item.img" class="cover-img" />
                    <span class="pic-text"></span>
                  </a>
                  <div class="block">
                    <h4 class="title">
                      <a :href="item.href">{{item.title}}</a>
                    </h4>
                    <p>
                      <span class="label">标题:</span>
                      <span>{{item.desc}}</span>
                    </p>
                    <p>
                      <span class="label">类型:</span>
                      <span>{{item.type && item.type.title}}</span>
                    </p>
                    <p>
                      <span class="label">更新:</span>
                      <span>{{item.index_show}}</span>
                    </p>
                    <div class="btn-box">
                      <button class="play">立即播放</button>
                      <button class="desc">查看详情</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template #right>
            <div class="card-right">
              <template v-if="sideData[0]">
                <card-head src="./assets/hot.png">
                  {{sideData[0].title}}
                </card-head>
                <top-list :list="sideData[0].data"></top-list>
              </template>
              <template v-if="sideData[1]">
                <card-head src="./assets/hot.png">
                  {{sideData[1].title}}
                </card-head>
                <top-list :list="sideData[1].data"></top-list>
              </template>
            </div>
          </template>
        </card-com>
        <ul class="pagination">
          <li
            class="page-item"
            :class="{disabled : hasUp}"
            @click="handPage(0)"
          >
            <span class="page-link">上一页</span>
          </li>
          <li
            class="page-item"
            :class="{ active : item == pagination.page }"
            v-for="item in pagination.data"
            :key="item"
            @click="handPagination(item)"
          >
            <span class="page-link">{{item}}</span>
          </li>
          <li
            class="page-item"
            :class="{disabled : hasNext}"
            @click="handPage(1)"
          >
            <span class="page-link">下一页</span>
          </li>
        </ul>
      </main>
      <footer-com></footer-com>
    </div>
    <script>
      // 声明组件空间
      // 存储vue组件
      window.VueComponents = {};
      window.APIDATA = {};
    </script>
    <!-- 引入全局库 -->
    <script src="./js/lib.js"></script>
    <!-- 获取数据方法 -->
    <script src="./data/index.js"></script>
    <script src="./data/type.js"></script>

    <!-- 引入组件文件 -->
    <script src="./component/Header.js"></script>
    <script src="./component/Footer.js"></script>
    <script src="./component/Card.js"></script>
    <script src="./component/VideoList.js"></script>
    <script src="./component/TopList.js"></script>
    <script src="./component/Consult.js"></script>

    <script src="./js/search.js"></script>
  </body>
</html>
